<template>
	<view class="clientInfo_container">
		<z-paging ref="paging" v-model="listData" @query="queryCouponByPlatformApp">
			<template #top>
				<v-tabs class="mb15" v-model="tabCurrent" bgColor="transparent" :scroll="false" activeColor="#333333"
					fontSize="34rpx" :bold="true" lineColor="#33bf8d" lineHeight="6rpx" lineScale="0.3" :tabs="list"
					@change="tabChange()"></v-tabs>
			</template>

			<view class="content">
				<view class="d-flex flex-column content_item w100p mb15" v-for="item in listData" :key="item.orderCode"
					@click="goPage(item)">
					<view class="d-flex a-center mb15 itemRow">
						<!-- <view class="line mr10"></view> -->
						<view class="title">券码：{{item.couponCode}}</view>
					</view>
					<view class="d-flex a-center j-sb mb15 itemRow">
						<view class="title_item">领用时间</view>
						<view class="value_item">{{item.createTime || praseStrEmpty}}</view>
					</view>
					<view class="d-flex a-center j-sb mb15 itemRow">
						<view class="title_item">核销状态</view>
						<view class="value_item">
							<u-tag plain size="mini" :text="item.couponStatus==0?'未核销':'已核销'"
								:type="item.couponStatus==0?'error':'success'"></u-tag>
						</view>
					</view>
					<view class="d-flex a-center j-sb mb15 itemRow" v-if="item.updateTime">
						<view class="title_item">核销时间</view>
						<view class="value_item">{{item.updateTime || praseStrEmpty}}</view>
					</view>
					<view class="d-flex a-center j-sb mb15 itemRow" v-if="item.customerName">
						<view class="title_item">核销客户</view>
						<view class="value_item">{{item.customerName || praseStrEmpty}}</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		queryCouponByPlatformApp
	} from "@/api/index.js"

	export default {
		components: {},
		data() {
			return {
				userInfo: uni.getStorageSync('housekeeperInfo'),
				tabCurrent: 0,
				tabCurrent2: 0,
				list: ["全部", "待核销", "已核销"],
				listData: []
			};
		},
		onLoad() {},
		onShow() {
			if (this.tabCurrent == 0) {
				this.tabCurrent2 = ""
			} else if (this.tabCurrent == 1) {
				this.tabCurrent2 = "0"
			} else {
				this.tabCurrent2 = "1"
			}
		},
		methods: {
			queryCouponByPlatformApp(pageNo, pageSize) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				queryCouponByPlatformApp({
					pageIndex: pageNo,
					pageSize: pageSize,
					housekeeperCode: this.userInfo.housekeeperCode,
					couponStatus: this.tabCurrent2,
				}).then(res => {

					this.$refs.paging.complete(res.object.data);
					uni.hideLoading()
				})
			},

			tabChange(item) {
				if (item == 0) {
					this.tabCurrent2 = ""
				} else if (item == 1) {
					this.tabCurrent2 = "0"
				} else {
					this.tabCurrent2 = "1"
				}

				this.$refs.paging.reload()
			}
		}
	};
</script>

<style lang="scss" scoped>
	.clientInfo_container {
		min-height: 100vh;
		background: linear-gradient(179deg, #46ebb0 0%, #ffffff 80%);
		font-family: Source Han Sans CN, Source Han Sans CN-500 !important;

		.content {
			box-sizing: border-box;
			padding: 0rpx 28rpx;
			display: flex;
			flex-direction: column;
			align-items: center;


			.content_item {
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 12rpx;
				background-color: #fff;
				padding: 40rpx;

				.itemRow:last-child {
					margin-bottom: 0 !important;
				}

				.title {
					color: #333333;
					font-size: 34rpx;
					font-weight: 600;
				}

				.line {
					width: 12rpx;
					height: 34rpx;
					background: #38d19a;
					border-radius: 3px;
				}

				.title_item {
					font-size: 28rpx;
					color: #333333;
				}

				.value_item {
					font-size: 28rpx;
					color: #666666;
				}
			}
		}
	}
</style>